<template>
  <a-row :gutter="10">
    <a-col :md="6" :sm="24">
      <a-card :bordered="false">
        <!-- 按钮操作区域 -->
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <!-- 树-->
          <a-col :md="24" :sm="24">
            <div style="background:#ECECEC; padding:10px">
              <a-card title="打印列表" :bordered="false">
                <p v-for="(item,index) in typelist" :key="index" :class="[currentTab==index ? 'activewzhi' : 'wzhi']" @click="changetab" :data-index="index">
                  {{item.typeName}}
                </p>
              </a-card>
            </div>
          </a-col>
        </div>
      </a-card>
    </a-col>
    <a-col :md="18" :sm="24">
      <a-card :bordered="false" :class="{'abcdefg':true}">
        <div class="btncolum">
          <a-row type="flex" justify="space-between" align="middle">
            <a-col :span="6">
              <a-button type="primary" icon="printer" @click="checkSuccess">PDF全部预览打印</a-button>
            </a-col>
            <a-col :span='6'>
              <a-button v-print="'#printContent'" ghost type="primary" style="float:right;">打印本页</a-button>
            </a-col>
          </a-row>
        </div>
        <section ref="print" id="printContent" class="abcdefg">
          <div v-html="htmlword"></div>
        </section>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { getAction,postAction } from '@/api/manage'
  export default {
    data(){
      return {
        currentTab:0,   //索引
        pingGuFenLei:0, //•评估分类;数据字典[取值0-3]：0.全部; 1.生命力评估; 2.器官功能评估; 3.抗衰老评估;
        ceShiFenLei:0, //0.全部;1-23查看数据字典; 对应小分类
        yongHuZhuJian:"e9ca23d68d884d4ebb19d07889727dae",
        piCiHao:'PCH10417618278',
        htmlword:'',
        typelist: [
          {
            "pingGuFenLei": 0,
            "ceShiFenLei": 0,
            "typeName": "全部"
          },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 2,
          //   "typeName": "毒素"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 3,
          //   "typeName": "矿物质"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 4,
          //   "typeName": "维生素"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 5,
          //   "typeName": "氨基酸"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 6,
          //   "typeName": "情绪"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 7,
          //   "typeName": "脊椎"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 8,
          //   "typeName": "经络"
          // },
          // {
          //   "pingGuFenLei": 1,
          //   "ceShiFenLei": 9,
          //   "typeName": "七轮"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 1,
          //   "typeName": "消化系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 2,
          //   "typeName": "免疫系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 3,
          //   "typeName": "内分泌系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 4,
          //   "typeName": "心血管系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 5,
          //   "typeName": "呼吸系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 6,
          //   "typeName": "泌尿生殖系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 7,
          //   "typeName": "骨骼肌肉系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 8,
          //   "typeName": "五官皮肤系统"
          // },
          // {
          //   "pingGuFenLei": 2,
          //   "ceShiFenLei": 9,
          //   "typeName": "神经系统"
          // },
          // {
          //   "pingGuFenLei": 3,
          //   "ceShiFenLei": 1,
          //   "typeName": "脑功能"
          // },
          // {
          //   "pingGuFenLei": 3,
          //   "ceShiFenLei": 2,
          //   "typeName": "抗衰老"
          // },
          // {
          //   "pingGuFenLei": 3,
          //   "ceShiFenLei": 3,
          //   "typeName": "染色体"
          // },
          // {
          //   "pingGuFenLei": 3,
          //   "ceShiFenLei": 4,
          //   "typeName": "过敏源"
          // },
          // {
          //   "pingGuFenLei": 3,
          //   "ceShiFenLei": 5,
          //   "typeName": "肿瘤"
          // },
        ],
      }
    },
    created() {
      //用户id赋值
      if(this.$route.query.yongHuZhuJian){
        this.yongHuZhuJian = this.$route.query.yongHuZhuJian;
      }
      //批次号赋值
      if(this.$route.query.piCiHao){
        this.piCiHao = this.$route.query.piCiHao;
      }
      //调用打印页面请求
      this.getpagedata();
      //调用pdf文件
      this.getpdf();
    },
    mounted(){
    },
    methods: {
      // 获取当前打印富文本
      getpagedata(){
        var that = this;
        let param = {
          yongHuZhuJian:that.yongHuZhuJian,
          piCiHao:that.piCiHao,
          pingGuFenLei:that.pingGuFenLei,
          ceShiFenLei:that.ceShiFenLei,
        }
        postAction("/bfjy5sYjkgncsController/getPrintFilePage",param).then(res=>{
          if(res.success){
            that.$message.info(res.message);
          }else{
            // console.log(res);
            that.htmlword = res;
          }
        })
      },
      // 打开pdf文件
      checkSuccess() {
        //自动设置后台服务 baseURL (也可以手工指定写死项目名字)
          let baseDomain = window._CONFIG['domianURL'];   //接口全局路径
          let pdfmain = 'http://39.96.117.166:8088/static/generic/web/viewer.html?file=' //pdf静态文件地址
          // 后台返回流的形式
          let url = baseDomain + `/bfjy5sYjkgncsController/showPdf?yongHuZhuJian=${this.yongHuZhuJian}&piCiHao=${this.piCiHao}&pingGuFenLei=${this.pingGuFenLei}&ceShiFenLei=${this.ceShiFenLei}&.pdf`
          // 测试.pdf 是可以在浏览器标签叶上显示
          window.open(pdfmain + encodeURIComponent(url));
      },
      // 获取pdf文件
      getpdf(){
        var that = this;
        let param = {
          yongHuZhuJian:that.yongHuZhuJian,
          piCiHao:that.piCiHao,
          pingGuFenLei:that.pingGuFenLei,
          ceShiFenLei:that.ceShiFenLei,
        }
        getAction("/bfjy5sYjkgncsController/showPdf",param).then(res=>{
          if(res.success){
            that.$message.info(res.message);
          }else{
            
          }
        })
      },
      //切换选择
      changetab:function(e){
        var that = this;
        let index = e.currentTarget.dataset.index;
        that.currentTab = index;  //下标
        that.pingGuFenLei = that.typelist[index].pingGuFenLei;  //•评估分类;数据字典[取值0-3]：0.全部; 1.生命力评估; 2.器官功能评估; 3.抗衰老评估;
        that.ceShiFenLei = that.typelist[index].ceShiFenLei;  //•数据字典[取值0-23]：0.全部;1-23查看数据字典; 对应小分类
        //调用打印页面请求
        that.getpagedata();
      },
    }
  }
</script>
<style scoped>
  /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
  /* * {
    color: #000000!important;
    -webkit-tap-highlight-color: #000000!important;
  } */
  /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

  .abcdefg .ant-card-body{
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 1%;
    border:0px solid black;
    min-width: 800px;
    color:#000000!important;
  }
  .explain{
    text-align: left;
    margin-left: 50px;
    color:#000000!important;
  }
  .explain .ant-input,.sign .ant-input{
    font-weight:bolder;
    text-align:center;
    border-left-width:0px!important;
    border-top-width:0px!important;
    border-right-width:0px!important;
  }
  .explain div{
    margin-bottom: 10px;
  }
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  /* 切换文字颜色 */
  .activewzhi{
    padding-left: 5px;
    background: #1890FF;
    color: #fff;
    cursor: pointer;
  }
  .wzhi{
    padding-left: 5px;
    cursor: pointer;
  }
  /* 按钮组 */
  .btncolum{
    width: 100%;
  }
</style>